import { Component } from '@angular/core';
import { ICellRendererAngularComp } from '@ag-grid-community/angular';
import { AllModules, Module } from '@ag-grid-enterprise/all-modules';
import { GridOptions } from '@ag-grid-community/core';
import { RenderOperatingButtonComponent } from '@shared/ag-grid-ext/cell-renders/render-operating-button.component';
import { GridConfigService } from '@core/config/grid-config.service';
import { RenderUploadComponent } from '@shared/ag-grid-ext/cell-renders/render-upload.component';
import { RenderTooltipComponent } from '@shared/ag-grid-ext/cell-renders/render-tooltip.component';


@Component({
  selector: 'apes-render-detail',
  template: `
    <div class="apes-render-detail" [ngStyle]="{height:_height}">
      <div [ngClass]="{'apes-render-detail-box':domLayout =='autoHeight'}">
        <ag-grid-angular
          #detailGrid
          class="ag-theme-balham apes-detail-agGrid"
          [ngStyle]="{height:_height}"
          [modules]="modules"
          [columnDefs]="colDefs"
          [defaultColDef]="defaultColDef"
          [gridOptions]="gridOptions"
          [rowData]="rowData"
          [context]="context"
          [frameworkComponents]="frameworkComponents"
          (gridReady)="onGridReady($event)"
          [localeText]="localeText">
        </ag-grid-angular>
      </div>
    </div>
  `,
  styles: [`
    .apes-render-detail {
      overflow: hidden;
    }

    .apes-render-detail-box {
      height: calc(100% - 8px);
      overflow: auto;
      /*padding-bottom: 20px;*/
    }

    .apes-detail-agGrid {
      width: 100%;
      /*height: 300px;*/
      padding: 8px;
    }

  `],
})
export class RenderDetailComponent implements ICellRendererAngularComp {
  refresh(params: any): boolean {
    return false;
  }

  params: any;
  _height: any = 300;
  defaultColDef: any;
  rowData: any[] = [];
  colDefs: any;
  masterGridApi: any;
  rowId: any;
  modules: Module[] = AllModules;
  gridOptions: GridOptions;
  frameworkComponents: any;
  localeText: any;
  context: {};
  domLayout: any = '';
  gridApi: any;

  constructor(
    private gridConfigService: GridConfigService,
  ) {
    this.gridOptions = <GridOptions>{
      suppressExcelExport: true,
      suppressCsvExport: true,
      showToolPanel: false,
    };
    this.gridOptions.localeText = gridConfigService.getLocaleText();
  }

  agInit(params: any): void {

    this.params = params;

    if (params.context) {
      this.context = params.context;
    }

    this.masterGridApi = params.api;
    this.rowId = params.node.id;

    let options = params.detailGridOptions;
    this.colDefs = options.columnDefs;


    this.defaultColDef = {
      flex: 1,
      // minWidth: 80,
    };

    this.frameworkComponents = {
      dialogButton: RenderOperatingButtonComponent,
      upload: RenderUploadComponent,
      renderTooltip: RenderTooltipComponent,
    };

    this.rowData = params.data[params.detailList] ? params.data[params.detailList] : [];
    this._height = params.detailRowHeight ? params.detailRowHeight + 'px' : '300px';

    setTimeout(() => {
      if (options.hasOwnProperty('domLayout') && options.domLayout != '') {
        this.domLayout = options.domLayout;
        this.setAutoHeight();
      }
    }, 100);
  }

  onGridReady(params) {
    this.gridApi = params.api;
    let gridInfo = {
      id: this.rowId,
      api: params.api,
      columnApi: params.columnApi,
    };

    // console.log('adding detail grid info with id: ', this.rowId);
    this.masterGridApi.addDetailGridInfo(this.rowId, gridInfo);
  }

  setAutoHeight() {
    this.gridApi.setDomLayout('autoHeight');
    (document.querySelector<HTMLElement>('#detailGrid')! as any).style.height = '';
  }

  ngOnDestroy(): void {
    this.masterGridApi.removeDetailGridInfo(this.rowId);
  }

}
